<template>
  <div class="dialog-title-box">
    <div class="bg-title-box">
      {{Number(props.index) == 1 ? '一' : '二'}}号 · 服务器状态
    </div>
  </div>
  <el-row class="dialog-content-box">
    <el-col :span="12">
      <DialogTitle>
        内存状态
      </DialogTitle>
      <div style="padding-top: 12px;">
        <div style="position: relative;">
          <div :id="'Liquid2' + props.index" style="position: relative;z-index: 99;"></div>
          <div class="circle-zdy-box"></div>
        </div>
        <el-row style="margin-top: 8px;">
          <el-col :span="8" class="col-common-content-box">
            <template v-if="Number(props.index) == 1">
            {{(store.monitorList.sys_list.mem.list[0].total / 1024).toFixed(2)}}GB
          </template>
          <template v-if="Number(props.index) == 2">
            {{(store.monitorList2.sys_list.mem.list[0].total / 1024).toFixed(2)}}GB
          </template>
            <div class="common-font-main-box">
              总内存
            </div>
          </el-col>
          <el-col :span="8" class="col-common-content-box">
            <template v-if="Number(props.index) == 1">
              {{(store.monitorList.sys_list.mem.list[0].used / 1024).toFixed(2)}}GB
            </template>
            <template v-if="Number(props.index) == 2">
              {{(store.monitorList2.sys_list.mem.list[0].used / 1024).toFixed(2)}}GB
            </template>
            <div class="common-font-main-box">
              已用内存
            </div>
          </el-col>
          <el-col :span="8" class="col-common-content-box">
            <template v-if="Number(props.index) == 1">
              {{((store.monitorList.sys_list.mem.list[0].total / 1024).toFixed(2) - (store.monitorList.sys_list.mem.list[0].used / 1024).toFixed(2)).toFixed(2)}}GB
            </template>
            <template v-if="Number(props.index) == 2">
              {{((store.monitorList2.sys_list.mem.list[0].total / 1024).toFixed(2) - (store.monitorList2.sys_list.mem.list[0].used / 1024).toFixed(2)).toFixed(2)}}GB
            </template>
            <div class="common-font-main-box">
              可用内存
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-col :span="12">
      <DialogTitle>
        磁盘状态
      </DialogTitle>
      <div class="ring-flex-box">
        <div :id="'ringBox' + props.index"></div>
        <el-row style="width: 100%;padding-top: 20px;">
          <el-col :span="8" class="col-common-content-box">
            <template v-if="Number(props.index) == 1">
              {{store.monitorList.sys_list.disk.list[0].total}}GB
            </template>
            <template v-if="Number(props.index) == 2">
              {{store.monitorList2.sys_list.disk.list[0].total}}GB
            </template>
            <div class="common-font-main-box">
              总内存
            </div>
          </el-col>
          <el-col :span="8" class="col-common-content-box">
            <template v-if="Number(props.index) == 1">
              {{store.monitorList.sys_list.disk.list[0].used}}GB
            </template>
            <template v-if="Number(props.index) == 2">
              {{store.monitorList2.sys_list.disk.list[0].used}}GB
            </template>
            <div class="common-font-main-box">
              已用内存
            </div>
          </el-col>
          <el-col :span="8" class="col-common-content-box">
            <template v-if="Number(props.index) == 1">
              {{(store.monitorList.sys_list.disk.list[0].total - store.monitorList.sys_list.disk.list[0].used).toFixed(2)}}GB
            </template>
            <template v-if="Number(props.index) == 2">
              {{(store.monitorList2.sys_list.disk.list[0].total - store.monitorList2.sys_list.disk.list[0].used).toFixed(2)}}GB
            </template>
            <div class="common-font-main-box">
              可用内存
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-col :span="12" style="margin-top: 30px;">
      <DialogTitle>
        CPU使用率
      </DialogTitle>
      <div class="Gauge-flex-box">
        <div :id="'GaugeBox' + props.index"></div>
        <el-row style="width: 100%;padding-top: 20px;">
          <el-col :span="12" class="col-common-content-box-cpu">
            <el-image class="cpu-image" :src="cpuImg"></el-image>2.50GHZ
          </el-col>
          <el-col
            :span="12"
            class="col-common-content-box-cpu right-box-content"
          >
            <el-image class="wd-img" :src="wdImg"></el-image>{{Math.floor(Math.random() * 46) + 30}} ℃
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-col :span="12" style="margin-top: 30px;">
      <DialogTitle>
        其他服务器状态
      </DialogTitle>
      <el-row style="width: 100%;padding-top: 30px;">
        <el-col :span="24" class="col-common-content-box2 row">
          Nginx
          <div class="dot-right-box">
            <template v-if="Number(props.index) == 1">
              <Dot class="dot-view" :status="store.monitorList.list[1].status == 1 ? 'success' : 'danger'"></Dot>PID: {{store.monitorList.list[1].pid}}
            </template>
            <template v-if="Number(props.index) == 2">
              <Dot class="dot-view" :status="store.monitorList2.list[1].status == 1 ? 'success' : 'danger'"></Dot>PID: {{store.monitorList2.list[1].pid}}
            </template>
          </div>
        </el-col>
        <el-col :span="24" class="col-common-content-box2 row">
          PHP
          <div class="dot-right-box">
            <template v-if="Number(props.index) == 1">
              <Dot class="dot-view" :status="store.monitorList.list[0].status == 1 ? 'success' : 'danger'"></Dot>PID: {{store.monitorList.list[0].pid}}
            </template>
            <template v-if="Number(props.index) == 2">
              <Dot class="dot-view" :status="store.monitorList2.list[0].status == 1 ? 'success' : 'danger'"></Dot>PID: {{store.monitorList2.list[0].pid}}
            </template>
          </div>
        </el-col>
        <el-col :span="24" class="col-common-content-box2 row">
          并发数
          <div class="dot-right-box">
            <template v-if="Number(props.index) == 1">
            {{store.monitorList.sys_list.tcp.list[store.monitorList.sys_list.tcp.list.length - 1].Close}}
          </template>
          <template v-if="Number(props.index) == 2">
            {{store.monitorList2.sys_list.tcp.list[store.monitorList2.sys_list.tcp.list.length - 1].Close}}
          </template>
          </div>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { onMounted, nextTick } from 'vue'
import { Liquid, RingProgress, Gauge } from '@antv/g2plot'
import DialogTitle from './Common/DialogTitle.vue'
import cpuImg from '../assets/images/icon_cpu.png'
import wdImg from '../assets/images/icon_wd.png'
import Dot from './Common/Dot.vue'
import { PiniaStore } from '../store/index'
const store = PiniaStore()
interface PropsType {
  //   是否需要更多按钮
  index?: any
}
const props = withDefaults(defineProps<PropsType>(), {
  index: 1
})
const liquidInit = (data:any) => {
  const liquidPlot = new Liquid(document.getElementById('Liquid2' + props.index) as any, {
    percent: data,
    radius: 0.8,
    width: 120,
    height: 120,
    outline: {
      border: 0,
      distance: 0,
      style: {
        stroke: '#2b4060'
      }
    },
    statistic: {
      title: {
        formatter: () => '',
        style: () => ({
          fill: 'white'
        })
      },
      content: {
        style: () => ({
          fontSize: 14,
          lineHeight: 1,
          fill: 'white'
        })
      }
    },
    liquidStyle: () => {
      return {
        fill: 'l(270) 0:#1f8ff6 0.7:#1f8ff6 1:#a6cbff',
        stroke: 'l(270) 0:#1f8ff6 0.7:#1f8ff6 1:#a6cbff',
        lineWidth: 3
      }
    },
    color: () => '#5B8FF9'
  })
  liquidPlot.render()
}
const ringInit = (data:any) => {
  const ringProgress = new RingProgress('ringBox' + props.index, {
    height: 100,
    width: 100,
    innerRadius: 0.7,
    autoFit: false,
    percent: data,
    statistic: {
      content: {
        style: () => ({
          fontSize: 14,
          lineHeight: 1,
          fill: 'white'
        })
      }
    },
    color: ['l(270) 0:#1890ff 0.5:#7ec2f3 1:#a6cbff', '#2b4060']
  })

  ringProgress.render()
}
const GaugeInit = (data:any) => {
  const gauge = new Gauge('GaugeBox' + props.index, {
    percent: data,
    width: 150,
    height: 150,
    innerRadius: 0.85,
    range: {
      color: ['l(0) 0:#a6cbff 0.5:#1890ff 1:#1890ff', '#2b4060']
    },
    gaugeStyle: {
      // 因为圆角是借助重叠去实现的，所以建议填充色不要有透明度
      fillOpacity: 1,
      // lineCap: 'round',
      stroke: '#2b4060',
      lineWidth: 4
    },
    startAngle: Math.PI,
    endAngle: 2 * Math.PI,
    indicator: {
      pointer: {
        style: {
          stroke: '#1890ff'
        }
      },
      pin: {
        style: {
          stroke: '#1890ff'
        }
      }
    },
    axis: {
      label: null,
      subTickLine: {
        count: 1
      },
      tickLine: {
        length: 3,
        style: {
          stroke: '#fff',
          fill: '#fff'
        }
      }
    },
    statistic: {
      content: {
        offsetY: 36,
        formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
        style: {
          color: 'rgba(255,255,255, 1)',
          fontSize: 14
        }
      }
    }
  })

  gauge.render()
}
onMounted(() => {
  nextTick(() => {
    let liquidData:any = null
    let ringData:any = null
    let gaugeData:any = null
    if(Number(props.index) === 1){
      liquidData = (store.monitorList.sys_list.mem.list[0].used / 1024).toFixed(2) / (store.monitorList.sys_list.mem.list[0].total / 1024).toFixed(2)
      ringData = store.monitorList.sys_list.disk.list[0].value / 100
      gaugeData = store.monitorList.sys_list.cpu.list[0].value / 100
    } else {
      liquidData = (store.monitorList2.sys_list.mem.list[0].used / 1024).toFixed(2) / (store.monitorList2.sys_list.mem.list[0].total / 1024).toFixed(2)
      ringData = store.monitorList2.sys_list.disk.list[0].value / 100
      gaugeData = store.monitorList2.sys_list.cpu.list[0].value / 100
    }
    liquidInit(liquidData)
    ringInit(ringData)
    GaugeInit(gaugeData)
  })
})
</script>
<style lang="scss" scoped>
.dialog-title-box {
  display: flex;
  justify-content: center;
  align-items: center;
  .bg-title-box {
    width: 50%;
    height: 50px;
    background-image: url('../assets/images/title2@2x.png');
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.dialog-content-box {
  height: 485px;
  background-image: url('../assets/images/bg_one@2x.png');
  background-size: 100% 100%;
  margin-top: 25px;
  padding: 15px;
  box-sizing: border-box;
}
.col-common-content-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.col-common-content-box-cpu {
  display: flex;
  align-items: center;
  .cpu-image {
    width: 16px;
    margin-right: 5px;
    margin-top: 6px;
  }
  .wd-img {
    width: 12px;
    height: 18px;
    margin-right: 5px;
  }
}
.right-box-content {
  display: flex;
  justify-content: flex-end;
}
.common-font-main-box {
  color: #c4c4c4;
  font-size: 12px;
  margin-top: 5px;
}
.ring-flex-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 20px;
}
.circle-zdy-box {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background-color: transparent;
  border: 6px solid #2b4060;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.Gauge-flex-box {
  padding: 0 15px;
}
.col-common-content-box2 {
  padding: 10px 15px;
  border-radius: 5px;
  background-color: #1a2f50;
  margin-bottom: 25px;
  display: flex;
  justify-content: space-between;
  .dot-right-box {
    display: flex;
    align-items: center;
    .dot-view {
      margin-right: 10px;
    }
  }
}
</style>
